<template>
    <div class="m_right">
        <p></p>
        <div class="mem_t">修改用户信息</div>
        <form>
            <table>
                <tr>
                    <td style="width: 40%;">
                        <label>用户姓名：</label>
                    </td>
                    <td>
                        <input name="userName" @blur="checkUserName" v-model="userName" />
                        <span style="color: red;">{{ userNameError }}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>用户性别：</label>

                    </td>
                    <td>
                        <select name="sex" v-model="sex" @change="checkSex">
                            <option value="">--请选择--</option>
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
                        <span style="color: red;">{{ sexError }}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>邮箱：</label>
                    </td>
                    <td>
                        <input name="email" @blur="checkEmail" v-model="email" />
                        <span style="color: red;">{{ emailError }}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>手机：</label>

                    </td>
                    <td>
                        <input name="mobile" @blur="checkMobile" v-model="mobile" />
                        <span style="color: red;">{{ mobileError }}</span>
                    </td>
                </tr>

            </table>



        </form>
        <div style="margin-top: 20px; text-align: center;">
            <button @click.prevent="toUpdate">提交</button>&nbsp;&nbsp;&nbsp;
            <button @click.prevent="back()">取消</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MemberUserUpdateRight',
    data() {
        return {
            userId: '',

            userName: '',
            id: '',
            sex: '',
            email: '',
            mobile: '',

            userNameError: '',
            sexError: '',
            emailError: '',
            mobileError: '',

            check:false
        }
    },
    methods: {
        checkUserName() {
            if (this.userName == '') {
                this.userNameError = '用户名称不能为空'
                return false
            }
            this.userNameError = ''
            return true
        },
        checkSex() {
            if (this.sex == '') {
                this.sexError = '性别不能为空'
                return false
            }
            this.sexError = ''
            return true
        },
        checkEmail() {
            if (this.email == this.user.email) {
                this.emailError = ''
                return true
            }

            if (this.email == '') {
                this.emailError = '邮箱不能为空'
                return false
            }
            let patten = /^[^\s@]+@[^\s@]+.[^\s@]+$/
            if (!patten.test(this.email)) {
                this.emailError = '邮箱格式不正确'
                return false
            }
            this.$axios({
                url: '/checkEmail',
                method: 'get',
                params: { email: this.email }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.emailError = ''
                    return true
                } else {
                    this.emailError = '邮箱被占用！'
                    return false
                }
            })

        },
        checkMobile() {
            if (this.mobile == this.user.mobile) {
                this.mobileError = ''
                return true
            }
            if (this.mobile == '') {
                this.mobileError = '手机不能为空'
                return false
            }
            let patten = /^1[3578]\d{9}$/
            if (!patten.test(this.mobile)) {
                this.mobileError = '手机格式不正确'
                return false
            }
            this.$axios({
                url: '/checkMobile',
                method: 'get',
                params: { mobile: this.mobile }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.mobileError = ''
                    return true
                } else {
                    this.mobileError = '手机被占用！'
                    return false
                }
            })

        },
        toUpdate() {
            if (this.checkUserName() && this.checkSex()&&this.checkEmail()&&this.checkMobile()) {
                this.$axios({
                    url: '/updateUser',
                    method: 'post',
                    data: {
                        id: this.id,
                        userName: this.userName,
                        sex: this.sex,
                        email: this.email,
                        mobile: this.mobile
                    },
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('修改成功！')
                        this.$router.push('/user')
                      
                    } else {
                        alert('修改失败！')
                    }
                })
            }

        },

        back() {
            history.back(-1)
        },
        getUser() {
            this.$axios({
                url: 'selectUserById',
                method: 'get',
                params: { id: this.userId }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.user = rs.data.user
                    this.userName = this.user.userName
                    this.id = this.user.id
                    this.email = this.user.email
                    this.mobile = this.user.mobile
                    this.sex = this.user.sex
                }
            })
        }
    },
    mounted() {
        this.userId = window.sessionStorage.getItem('userId')
        this.getUser()
    }
}
</script>

<style scoped>
/* 水平表单 */
.horizontal-form {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* 列间距 */
    flex-wrap: wrap;
    /* 小屏自动换行 */
}

.form-item {
    display: flex;
    align-items: center;
    gap: 4px;
    /* label 与 input 间距 */
}

/* 按钮组靠右 */
.buttons {
    margin-left: auto;
}

table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ddd;
}

th,
td {
    border: 1px solid #ddd;
    /* 内部细线 */
    padding: 6px 10px;
    /* 文字与线之间的空隙 */
}

th:nth-child(1),
td:nth-child(1) {
    width: 60px;
}

/* 序号 */
th:nth-child(2),
td:nth-child(2) {
    width: auto;
}

/* 资讯主题，自适应 */
th:nth-child(3),
td:nth-child(3) {
    width: 150px;
}

/* 发布时间 */
th:nth-child(4),
td:nth-child(4) {
    width: 120px;
}

/* 操作 */

tbody tr:hover {
    background: #f5f5f5;
}

thead th {
    background: #f5f5f5;
}

/* 分页居中 */
.pagination {
    text-align: center;
    margin-top: 20px;
}
</style>